<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-if="score>90">优秀</li>
        <li v-else-if="score>80">良好</li>
        <li v-else-if="score>70">及格</li>
        <li v-else>渣渣</li>
        <hr/>
        <!-- v-if不满足条件时直接不加载，v-show不满足时在HTML中加载（display：none）       -->
        <li v-if="flag">-if</li>
        <li v-show="flag">-show</li>


    </ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vue = new Vue({
            el: "#app",
            data: {
                score: 88,
                flag: true
            }
        })
    ;
</script>
</body>
</html>